<html>
<head>
    <meta charset="utf-8">
    <title>更多分类</title>
    <#assign base=request.contextPath  />
    <#setting  number_format="0.##"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${base}/frame/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${base}/sweep/css/app.css" media="all">
    <link rel="stylesheet" href="${base}/sweep/css/mui.min.css" media="all">
    <link rel="stylesheet" type="text/css" href="${base}/sweep/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/sweep/icon/iconfont.css"/>
    <script src="${base}/backstage/js/jquery-1.8.3.min.js"></script>
    <script src="${base}/sweep/js/mui.min.js"></script>
    <script src="${base}/backstage/layui/layui.js"></script>
    <script src="${base}/sweep/icon/iconfont.js"></script>
    <style>
        .mui-row.mui-fullscreen > [class*="mui-col-"] {
            height: 100%;
        }

        .mui-col-xs-3,
        .mui-control-content {
            /*overflow-y: auto;*/
            /*height: 100%;*/
        }

        .mui-segmented-control .mui-control-item {
            line-height: 50px;
            width: 100%;
        }

        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
            background-color: #fff;
        }

        .mui-toast-container {
            bottom: 50% !important;
        }

        .mask {
            position: absolute;
            top: 0px;
            filter: alpha(opacity=60);
            background-color: #777;
            z-index: 1002;
            left: 0px;
            opacity: 0.5;
            -moz-opacity: 0.5;
        }
    </style>
</head>
<body>
<div class="mui-content mui-row mui-fullscreen">
    <div class="mui-content-padded" style="margin: 5px;">
        <div class="mui-input-row mui-search">
            <input type="search" id="keyword" class="mui-input-clear" placeholder="请输入搜索类型,如:内衣,男士,女士">
        </div>
    </div>


    <div class="mui-col-xs-3">
        <div id="segmentedControls"
             class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
            <#--            <a class="mui-control-item mui-active" href="#content">全部</a>-->
            <#list commodity as commodity>
                <a class="mui-control-item" href="#${commodity.id}"
                   onclick="commodityId('${commodity.id}')">${commodity.name}</a>
            </#list>
        </div>
    </div>
    <div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">


        <#--            <div id="content" class="mui-control-content mui-active">-->
        <#--                <img src="${base}/sweep/lunbo/img/风衣2.jpg" style="width: 90%;position: relative;left:5%;height: 100px;margin-top: 20px;">-->

        <#--                <div class="mui-slider-group">-->
        <#--                    <div class="mui-slider-item">-->
        <#--                        <div class="demotwo">-->
        <#--                         -->
        <#--                            <div class="mui-col-xs-4 mui-col-sm-4">-->
        <#--                                <img src="${base}/sweep/lunbo/img/风衣2.jpg" style="width: 100%;height: 8%">-->
        <#--                                <h5 style="padding-top: 6px;">qw4</h5>-->
        <#--                            </div>-->
        <#--                        </div>-->
        <#--                    </div>-->
        <#--                </div>-->
        <#--            </div>-->
    </div>

</div>
</div>

<div id="mask" class="mask"></div>
<#--<a href="javascript:;" style="display: none" onclick="showMask()" id="mask" >点我显示遮罩层</a><br />-->
<button type="button" style="display: none;" onclick="showMask()" id="zhe">点我显示遮罩层</button>
</body>
<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });

    var form;
    layui.use(['table', 'form', 'layedit', 'laydate'], function () {
        form = layui.form
            , $ = layui.jquery
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , table = layui.table;
    })

    var flag = 0;

    //默认查询
    $(function () {
        var index = mui.toast("正在搜索数据中....");
        $.ajax({
            type: "GET",
            url: "${base}/wx/classification/selectByClassificationId",
            data: {id: '${one}'},
            success: function (data) {
                if (data.code === 200) {
                    $("#segmentedControlContents").html("")
                    $("#zhe").click();
                    setTimeout(function () {
                        selectImage(data.data[0].classificationId)
                        for (let i = 0; i < data.data.length; i++) {
                            $("#segmentedControlContents").append(
                                '<div id="image" class="mui-control-content mui-active" style="clear: both">' +
                                '<div id="a" class="mui-control-content mui-active">' +
                                '<div id="abc"></div>' +
                                '<p style="margin-left: 6%;color: #000;margin-top: 10px;">' + data.data[i].type + '</p>' +
                                '<div class="demo" style="background: #fff;width: 90%;margin-left: 5%;border-radius: 16px;">' +
                                '<div class="demotwo" id="cc' + flag + '">' +
                                '</div>' +
                                '</div>' +
                                '</div>' +
                                '</div>'
                            )
                            selectName(data.data[i].type, flag, '${one}');
                            flag++;
                        }
                        flag = 0;
                    }, 2000);


                }
            }
        });
    })


    function commodityId(id) {
        var index = mui.toast("正在搜索数据中....");
        $.ajax({
            type: "GET",
            url: "${base}/wx/classification/selectByClassificationId",
            data: {id: id},
            success: function (data) {
                if (data.code === 200) {
                    $("#segmentedControlContents").html("")
                    $("#zhe").click();
                    setTimeout(function () {
                        selectImage(data.data[0].classificationId)
                        for (let i = 0; i < data.data.length; i++) {
                            $("#segmentedControlContents").append(
                                '<div id="image" class="mui-control-content mui-active" style="clear: both">' +
                                '<div id="a" class="mui-control-content mui-active">' +
                                '<div id="abc"></div>' +
                                '<p style="margin-left: 6%;color: #000;margin-top: 10px;">' + data.data[i].type + '</p>' +
                                '<div class="demo" style="background: #fff;width: 90%;margin-left: 5%;border-radius: 16px;">' +
                                '<div class="demotwo" id="cc' + flag + '">' +
                                '</div>' +
                                '</div>' +
                                '</div>' +
                                '</div>'
                            )
                            selectName(data.data[i].type, flag, id);
                            flag++;
                        }
                        flag = 0;
                    }, 2000);


                }
            }
        });
    }

    function selectName(type, flag, id) {

        $.ajax({
            type: "GET",
            url: "${base}/wx/classification/selectName",
            data: {name: type, id: id},
            success: function (data) {
                if (data.code === 200) {
                    // setTimeout(function () {
                        for (let i = 0; i < data.data.length; i++) {
                            $("#cc" + flag + "").append(
                                '<div class="mui-col-xs-4 mui-col-sm-4">' +
                                '<img src="' + data.data[i].url + '" style="width: 100%;height: 8%">' +
                                '<h5 style="padding-top: 6px;">' + data.data[i].name + '</h5>' +
                                '</div>'
                            )
                        }
                        hideMask()
                    // }, 2000);

                }
            }
        });
    }

    function selectImage(id) {
        $.ajax({
            type: "GET",
            url: "${base}/wx/classification/selectImage",
            data: {id: id},
            success: function (data) {
                if (data.code === 200) {
                    $("#abc").append(
                        '<img src="' + data.data.url + '" style="width: 90%;position: relative;left:5%;height: 100px;margin-top: 20px;">'
                    )
                }
            }
        });
    }


    //搜索
    $("#keyword").on('keypress', function (e) {
        var keycode = e.keyCode;
        var searchName = $(this).val();
        if (keycode == '13') {
            if (searchName == null || searchName == "" || searchName == undefined) {
                mui.alert("请输入关键字");
            } else {
                var index = mui.toast("正在搜索数据中....");
                $.ajax({
                    type: "GET", //提交方式
                    url: "${base}/wx/classification/selectByName",//路径
                    data: {name: searchName},
                    success: function (data) {//返回数据根据结果进行相应的处
                        if (data.code == 200) {
                            if (data.data.length != 0) {
                                $("#segmentedControlContents").html("")
                                $("#zhe").click();
                                setTimeout(function () {
                                    $("#segmentedControlContents").append(
                                        '<div id="image" class="mui-control-content mui-active" style="clear: both">' +
                                        '<div id="a" class="mui-control-content mui-active">' +
                                        '<div id="abc"></div>' +
                                        '<div class="demo" style="background: #fff;width: 90%;margin-left: 5%;border-radius: 16px;">' +
                                        '<div class="demotwo">' +
                                        '</div>' +
                                        '</div>' +
                                        '</div>' +
                                        '</div>'
                                    )
                                    for (let i = 0; i < data.data.length; i++) {
                                        $(".demotwo").append(
                                            '<div class="mui-col-xs-4 mui-col-sm-4">' +
                                            '<img src="' + data.data[i].url + '" style="width: 100%;height: 8%">' +
                                            '<h5 style="padding-top: 6px;">' + data.data[i].name + '</h5>' +
                                            '</div>'
                                        )
                                    }
                                    hideMask()
                                }, 2000);

                            } else {
                                $("#segmentedControlContents").html("")
                                $("#segmentedControlContents").append(
                                    '<p style="color: red;text-align: center;">可以尝试提交反馈或换关键词搜索!</p>'
                                )
                            }


                        }
                    }
                });
                e.preventDefault();
                //请求搜索接口
            }
        }
    });


    //兼容火狐、IE8
    //显示遮罩层
    function showMask() {
        $("#mask").css("height", $(document).height());
        $("#mask").css("width", $(document).width());
        $("#mask").show();
    }
    //隐藏遮罩层
    function hideMask() {
        $("#mask").hide();
    }
</script>
</html>


